<template>
  <div class="activity-list">
    <el-card class="goods-list" shadow="hover">
      <el-select v-model="filterStudyState" placeholder="请选择活动状态" @change="fetchActivities">
        <el-option
            v-for="item in auditState"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>

      <el-table :data="filteredActivities" style="width: 100%">
        <el-table-column prop="activeName" label="活动名称"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="startTime" label="开始时间"></el-table-column>
        <el-table-column prop="endTime" label="结束时间"></el-table-column>
        <el-table-column prop="money" label="费用"></el-table-column>
        <el-table-column prop="needJoin" label="参与者人数"></el-table-column>
        <el-table-column prop="needVolunteer" label="志愿者人数"></el-table-column>
        <el-table-column prop="type" label="活动类型">
          <template slot-scope="scope">
            {{ scope.row.type === '0' ? '普通学习活动' : '非遗学习活动' }}
          </template>
        </el-table-column>
        <el-table-column prop="studyState" label="活动状态">
          <template slot-scope="scope">
            {{ formatStudyState(scope.row.studyState) }}
          </template>
        </el-table-column>
        <el-table-column prop="auditState" label="审核状态">
          <template slot-scope="scope">
            <el-tag :type="statusTagType(scope.row.auditState)">
              {{ statusText(scope.row.auditState) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="250" fixed="right" >
          <template slot-scope="scope">
            <el-button type="primary" @click="handleReview(scope.row)">审核</el-button>
            <el-button type="danger" @click="Reject(scope.row)">驳回</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {queryAllNormalStudy,
  auditNormalStudyRefuse,
  auditNormalStudyAllow} from '../../../api/index'

export default {
  data() {
    return {
      activities: [], // 存放接口返回的活动数据
      filterStudyState: '', // 用户选择的学习状态

      auditState:[
        {label: '全部', value: ''},
        {label: '未审核', value: '0'},
        {label: '已通过', value: '1'},
        {label: '已驳回', value: '2'},
      ]
    };
  },
  computed: {
    filteredActivities() {
      if (!this.filterStudyState) {
        return this.activities;
      }
      return this.activities.filter(activity => activity.auditState === this.filterStudyState);
    },
  },
  methods: {
    // 模拟审核操作，实际情况根据后端接口实现
    handleReview(activity) {
      if(activity.auditState !== '0'){
        this.$message.warning("当前活动已经审核过")
        return
      }
      this.$confirm('确认项目无误,审核通过?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('审核成功')
        auditNormalStudyAllow(activity.id).then(res=>{
          console.log(res)
        })
        activity.auditState = '1'; //
      }).catch(() => {
        this.$message.info('已取消')
        /**
         * 缺少用户ID
         */
        // auditNormalStudyRefuse().then(res=>{
        //
        // })
      });
    },
    Reject(activity){
      if(activity.auditState !== '0'){
        this.$message.warning("当前活动已经审核过")
        return
      }
      this.$prompt('请输入驳回理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputErrorMessage: '请输入理由'
      }).then(({ value }) => {

          this.$message.success('已成功驳回')
          const data = {
            activeId:activity.id,
            money:activity.money,
            reason:value,
            userId:activity.userId
          }
          auditNormalStudyRefuse(data).then(res=>{console.log(res)})
      }).catch(() => {
        this.$message.info('已取消')
      });
    },
    // 模拟从后端获取活动数据，实际情况根据后端接口实现
    fetchActivities() {
      // 假设使用axios发送请求获取数据，此处省略具体实现
      queryAllNormalStudy().then(res => {
        console.log(res)
        this.activities = res.data
        console.log(this.activities)
      })
    },
    formatStudyState(studyState) {
      switch (studyState) {
        case '0':
          return '报名中';
        case '1':
          return '进行中';
        case '2':
          return '已结束';
        case '3':
          return '已取消';
        case '4':
          return '参与者满人志愿满人';
        case '5':
          return '志愿满人';
        case '6':
          return '参与者满人';
        default:
          return '';
      }
    },
    statusTagType(status) {
      if (status === '0' ){
        return
      }
      return status === '1' ? 'success' : 'danger';
    },
    // 根据商品状态返回对应的文本
    statusText(status) {
      if (status === '0' ){
        return '未审核'
      }
      return status === '1' ? '审核通过' : '已驳回';
    },
  },
  mounted() {
    // 页面加载时获取活动数据
    this.fetchActivities();
  }
};
</script>

<style scoped>
.activity-list {
  margin: 20px;
}
</style>
